<template>
  <div class="expense-reimbursement">
    <div class="header">
      <router-link to="/main/xingzheng/jiedai/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>费用报销</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待报销" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="applicationNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="guestName" label="接待对象" width="120"></el-table-column>
            <el-table-column prop="receptionTime" label="接待时间" width="180"></el-table-column>
            <el-table-column prop="estimatedCost" label="预算金额" width="120">
              <template slot-scope="scope">
                {{ scope.row.estimatedCost }}元
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag type="success">已完成接待</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleReimbursement(scope.row)">报销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已报销" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applicationNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="guestName" label="接待对象" width="120"></el-table-column>
            <el-table-column prop="reimbursementNo" label="报销单号" width="180"></el-table-column>
            <el-table-column prop="actualCost" label="实际费用" width="120">
              <template slot-scope="scope">
                {{ scope.row.actualCost }}元
              </template>
            </el-table-column>
            <el-table-column prop="reimbursementTime" label="报销时间" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="接待详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="reception-detail" v-if="currentReception">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentReception.applicationNo }}</el-descriptions-item>
          <el-descriptions-item label="接待对象">{{ currentReception.guestName }}</el-descriptions-item>
          <el-descriptions-item label="来访单位">{{ currentReception.guestCompany }}</el-descriptions-item>
          <el-descriptions-item label="来访人数">{{ currentReception.guestCount }}人</el-descriptions-item>
          <el-descriptions-item label="接待时间">
            {{ formatDateRange(currentReception.receptionTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="预算金额">{{ currentReception.estimatedCost }}元</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section" v-if="currentReception.reimbursement">
          <h4>报销信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="报销单号">{{ currentReception.reimbursement.reimbursementNo }}</el-descriptions-item>
            <el-descriptions-item label="报销时间">{{ currentReception.reimbursement.reimbursementTime }}</el-descriptions-item>
            <el-descriptions-item label="实际费用">{{ currentReception.reimbursement.actualCost }}元</el-descriptions-item>
            <el-descriptions-item label="报销人">{{ currentReception.reimbursement.submitter }}</el-descriptions-item>
          </el-descriptions>

          <div class="expense-details">
            <h4>费用明细</h4>
            <el-table :data="currentReception.reimbursement.expenseItems" border style="width: 100%">
              <el-table-column prop="category" label="费用类型" width="150"></el-table-column>
              <el-table-column prop="amount" label="金额" width="120">
                <template slot-scope="scope">
                  {{ scope.row.amount }}元
                </template>
              </el-table-column>
              <el-table-column prop="description" label="说明"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 报销对话框 -->
    <el-dialog title="费用报销" :visible.sync="reimbursementDialogVisible" width="60%">
      <el-form :model="reimbursementForm" label-width="100px" v-if="currentReception">
        <el-form-item label="报销单号">
          <el-input v-model="reimbursementForm.reimbursementNo" disabled></el-input>
        </el-form-item>

        <el-form-item label="费用明细">
          <div class="expense-form">
            <div v-for="(item, index) in reimbursementForm.expenseItems" :key="index" class="expense-item">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-select v-model="item.category" placeholder="费用类型">
                    <el-option label="餐饮费" value="餐饮费"></el-option>
                    <el-option label="住宿费" value="住宿费"></el-option>
                    <el-option label="交通费" value="交通费"></el-option>
                    <el-option label="礼品费" value="礼品费"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-input-number v-model="item.amount" :min="0" placeholder="金额"></el-input-number>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.description" placeholder="说明"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeExpenseItem(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain icon="el-icon-plus" @click="addExpenseItem">添加费用项</el-button>
          </div>
        </el-form-item>

        <el-form-item label="合计金额">
          <span class="total-amount">{{ totalAmount }}元</span>
          <span class="budget-info" :class="{ 'over-budget': isOverBudget }">
            (预算: {{ currentReception.estimatedCost }}元)
          </span>
        </el-form-item>

        <el-form-item label="报销说明">
          <el-input type="textarea" v-model="reimbursementForm.remarks" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="附件">
          <el-upload
            action="#"
            :auto-upload="false"
            :file-list="fileList"
            multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">请上传发票、单据等凭证</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="reimbursementDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReimbursement">提交报销</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          applicationNo: 'JD202403001',
          guestName: '李总',
          guestCompany: 'XX科技公司',
          guestCount: 3,
          receptionTime: ['2024-03-20 14:00:00', '2024-03-20 17:00:00'],
          estimatedCost: 2000
        }
      ],
      completedList: [
        {
          applicationNo: 'JD202403002',
          guestName: '王总',
          reimbursementNo: 'BX202403001',
          actualCost: 1800,
          reimbursementTime: '2024-03-16 10:30:00',
          reimbursement: {
            reimbursementNo: 'BX202403001',
            reimbursementTime: '2024-03-16 10:30:00',
            actualCost: 1800,
            submitter: '张三',
            expenseItems: [
              { category: '餐饮费', amount: 1200, description: '商务午餐' },
              { category: '交通费', amount: 400, description: '接送机' },
              { category: '礼品费', amount: 200, description: '纪念品' }
            ]
          }
        }
      ],
      detailDialogVisible: false,
      reimbursementDialogVisible: false,
      currentReception: null,
      reimbursementForm: {
        reimbursementNo: '',
        expenseItems: [{ category: '', amount: 0, description: '' }],
        remarks: ''
      },
      fileList: []
    }
  },
  computed: {
    totalAmount() {
      return this.reimbursementForm.expenseItems.reduce((sum, item) => sum + (item.amount || 0), 0)
    },
    isOverBudget() {
      return this.currentReception && this.totalAmount > this.currentReception.estimatedCost
    }
  },
  methods: {
    formatDateRange(range) {
      if (!range || !range.length) return ''
      return `${range[0]} 至 ${range[1]}`
    },
    generateReimbursementNo() {
      const date = new Date()
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const random = String(Math.floor(Math.random() * 1000)).padStart(3, '0')
      return `BX${year}${month}${day}${random}`
    },
    viewDetail(row) {
      this.currentReception = row
      this.detailDialogVisible = true
    },
    handleReimbursement(row) {
      this.currentReception = row
      this.reimbursementForm = {
        reimbursementNo: this.generateReimbursementNo(),
        expenseItems: [{ category: '', amount: 0, description: '' }],
        remarks: ''
      }
      this.reimbursementDialogVisible = true
    },
    addExpenseItem() {
      this.reimbursementForm.expenseItems.push({ category: '', amount: 0, description: '' })
    },
    removeExpenseItem(index) {
      this.reimbursementForm.expenseItems.splice(index, 1)
    },
    submitReimbursement() {
      if (this.reimbursementForm.expenseItems.some(item => !item.category || !item.amount)) {
        this.$message.error('请填写完整的费用信息')
        return
      }

      // TODO: 提交报销信息到后端
      this.currentReception.reimbursement = {
        ...this.reimbursementForm,
        reimbursementTime: new Date().toLocaleString(),
        actualCost: this.totalAmount,
        submitter: '当前用户'
      }
      this.currentReception.reimbursementNo = this.reimbursementForm.reimbursementNo
      this.currentReception.actualCost = this.totalAmount
      this.currentReception.reimbursementTime = this.currentReception.reimbursement.reimbursementTime

      // 从待报销列表移动到已报销列表
      const index = this.pendingList.findIndex(item => item.applicationNo === this.currentReception.applicationNo)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentReception)
      }

      this.$message.success('报销提交成功')
      this.reimbursementDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.expense-reimbursement {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 15px 0 10px;
      color: #303133;
    }
  }

  .expense-form {
    .expense-item {
      margin-bottom: 15px;
    }
  }

  .expense-details {
    margin-top: 20px;
  }

  .total-amount {
    font-size: 18px;
    font-weight: bold;
    color: #409EFF;
  }

  .budget-info {
    margin-left: 10px;
    color: #909399;

    &.over-budget {
      color: #F56C6C;
    }
  }
}
</style> 